<!-- 弹窗组件 -->
<template>
    <div class="download_bookwrap" v-if="isShow">
        <div class="download_dialog_cover"></div>
        <div class="download_dialog_content" v-if="isShow">
            <div class="down_top">
                <div class="d_t_close" @click="close_update"></div>
            </div>
            <div class="down_title" v-show="!no_todown">
                <div class="d_t_left" @click="test">剩余任务数 : {{total}}</div>
                <div class="d_t_right">
                    <!-- <div class="top_update_button" @click="begin_update">一键更新</div> -->
                    <div class="top_stop_button" @click="alert_before">取消更新</div>
                </div>
            </div>
            <div class="down_con_wrap" v-show="!no_todown">
                <div class="downalert_content" :style="{backgroundColor:check_color(index)}" v-for="(item,index) in down_list" :key="item.id">
                    <div class="down_book_left_1" :style="{color:check_font_color(item)}">{{index | change_index}}、{{item.name}}</div>

                    <div class="down_book_middle_1" v-show="item.down_state == 1">
                        等待更新···
                    </div>

                    <div class="down_book_middle_1" v-show="item.down_state == 4">
                        更新失败
                    </div>
                    <div class="down_book_middle_1" v-show="item.down_state == 5">
                        正在初始化···
                    </div>


                    <div class="down_book_middle_2" v-show="item.down_state == 3">
                        更新完成
                    </div>

                    <div class="middle_progress" v-show="item.down_state == 2">
                      <span class="progress_span" :style="{width:item.down_progress+'%'}"></span>
                    </div>
                    <div class="down_book_right_1" v-show="item.down_state == 2">
                        {{item.down_progress}}%
                    </div>

                    <div class="down_speed">
                        <span v-show="item.down_state == 2">{{item.speed}} kb/s </span>
                    </div>
                </div>
            </div>
            <!-- <div class="down_alert_stop" @click="stop_down" v-show="!no_todown">暂停下载</div> -->


            <div class="downbook_no" v-show="no_todown">
                <div>暂无内容</div>
               <!--  <div class="downbook_n_down" @click="close_downbook">退出</div> -->
            </div>
        </div>


        <div class="homealert_exit" v-show="show_guanbi">
              <div class="homealert_cover" @click="guanbi_cancle"></div>
              <div class="homealert_content">
                   <div class="homealert_content_top">确定取消更新吗?</div>
                   <div class="homealert_content_down">
                    <div class="ha_c_d_left" @click="guanbi_sure">确定</div>
                    <div class="ha_c_d_right" @click="guanbi_cancle">取消</div>
                   </div>
              </div>
        </div>
    </div>
</template>

<script>
    import bus from '../assets/js/bus.js'
    import {GeneratorFactory} from "../assets/js/executor/ansyc_generator";
    import {GeneratorExecutor} from "../assets/js/executor/generator_executor";
    import {SetDownloader} from "../assets/js/setdownloader_sdk";

    export default {
        props: {
            isShow: {
                type: Boolean,
                default: false
            },
            check_list:{
              type:Array,
              default:false
            }
        },
        data() {
            return {
                dialogname: null,
                alert_text: '',
                down_list: [],
                now_index: 0,
                total: 0,
                go_continue: true,
                no_todown: false,
                susped_list:[],
                show_guanbi:false,
            }
        },
        filters: {
            change_state: function (data) {
                if (data == 1) {
                    return '等待更新···'
                }
                if (data == 2) {
                    return '更新中'
                }
                if (data == 3) {
                    return '更新完成'
                }
                if(data == 4) {
                    return '更新失败'
                }
                if(data == 5) {
                    return '正在初始化···'
                }
            },
            change_index:function(data){
                return data += 1
            }
        },
        watch: {
            isShow: function () {
                if (this.isShow) {
                    //先关闭
                    SetDownloader.destorySingleSetDownloader();
                    this.down_list = []
                    this.now_index = 0
                    this.total = 0
                    this.go_continue = true
                    this.no_todown = false
                    this.get_booklist()
                }
            },
        },
        methods: {
            test(){
               this.show_guanbi = true
            },
            guanbi_cancle(){  //取消
              this.show_guanbi = false
            },
            guanbi_sure(){  //确定
                this.show_guanbi = false
                this.stop_down()
            },
            alert_before(){   //弹窗
               this.show_guanbi = true
            },
            close_update(){  //关闭更新
                this.$emit('on-close', false)
            },
            check_color(data) { //改变颜色
                if (data%2 == 0) {
                    return '#EDF3FA'
                }
                if (data%2 != 0) {
                    return 'white'
                }
            },
            check_font_color(data){  //字体颜色
                 if(data.down_state == 1){
                    return '#999'
                 }
                 if(data.down_state == 2){
                    return '#408FFF'
                 }
                 if(data.down_state == 1){
                    return 'black'
                 }
                 if(data.down_state == 4){
                    return '#999'
                 }
            },
            close_downbook() {  //关闭
                this.$emit('on-close', false)
            },
            get_booklist() {  //获得书列表
                //console.log("get_booklist");
                let that = this;
                let cc = this.check_list[0].bookid;

                let downbook_has_down = this.check_list;
                that.down_list = [];
                that.$db_sdk.getData('pcDB', 'bookcontents', cc)
                    .then((res) => {
                        res.data.forEach((item_1) => {
                            item_1.lessonVOList.forEach((item_2) => {

                                let cf = downbook_has_down.findIndex((ele) => {
                                    return ele.id == item_2.id
                                })
                               // console.log(cf)
                                if (cf > -1) {
                                    item_2.down_progress = 0
                                    item_2.down_state = 1
                                    that.down_list.push(item_2)
                                }
                            })
                        });

                        that.total = that.down_list.length;
                        that.now_index = 0;
                       // return

                       this.begin_update()

                    })

            },
            begin_update(){  //一键更新
                console.log(this.down_list)
                //return
                 const that = this
                 that.init_lesson_res_list(function (setDownloadParam, dbObj, cloud_resource_list) {
                     that.execute_download(setDownloadParam, dbObj, cloud_resource_list);
                 })
            },
            stop_down() {  //停止更新
                SetDownloader.destorySingleSetDownloader()
                this.go_continue = false
                this.no_todown = false
                this.now_index = 0
                this.total = 0
                this.down_list = []
                this.$emit('on-close', false)
            },
            change_type(data) {  //restype换metatype
                switch (data) {
                    case 1:
                        return 'HeatMap'
                        break
                    case 2:
                        return 'TimeLapse'
                        break
                    case 3:
                        return 'Partial'
                        break
                    case 4:
                        return 'VirtualReality'
                        break
                    case 5:
                        return 'Rotation360'
                        break
                    case 6:
                        return 'InnerStruct'
                        break
                    case 7:
                        return 'PolyvVideo'
                        break
                    case 8:
                        return 'ZoomIn'
                        break
                    case 9:
                        return 'MultiAngle'
                        break
                    case 10:
                        return 'Quiz'
                    case 13:
                       return 'Collection'
                        break
                }
            },
            execute_download(setDownloadParam, dbObj, cloud_resource_list) {
                let that = this;
                //如果更新列表长度为0，且更新列表长度 小于等于 当前索引，直接退出
                if(that.down_list.length === 0 || that.now_index >= that.down_list.length){
                    return;
                }
                SetDownloader.startSingleSetDownloader(setDownloadParam, function (json) {
                    if (json) {
                        console.log("success::" + json);
                        let result = JSON.parse(json);
                        if (result.ReturnValue === "success") {
                            let now_down_obj = that.down_list[that.now_index];
                            now_down_obj.down_state = 2;
                            now_down_obj.down_progress = 0;
                            that.down_list.splice(that.now_index, 1, now_down_obj);
                        }
                        if (result.ReturnValue === "complete") {
                            //完成状态，message返回lessonId（为了改动不大，暂时这么做，后期优化）
                            if(result.Message != that.down_list[that.now_index].id){
                                return;
                            }
                            let now_down_obj = that.down_list[that.now_index];

                            let feture_version = that.down_list[that.now_index].resVersion
                            //debugger

                            now_down_obj.down_state = 3;
                            now_down_obj.down_progress = 100;
                            that.down_list.splice(that.now_index, 1, now_down_obj);


                            //更新db，用于标记已经更新
                            that.$db_sdk.getData('pcDB', 'bookcontents', localStorage.book_id)
                                .then((res) => {
                                    let nowLessonId = setDownloadParam.SetDownloadId;
                                    let version = ''
                                    res.data.forEach((item, index) => {
                                        item.lessonVOList.findIndex((element) => {
                                            if (element.id == nowLessonId) {

                                               // console.log(feture_version)

                                                version = element.resVersion
                                                let obj = {
                                                    id: nowLessonId,
                                                    bookid: localStorage.book_id,
                                                    resVersion: version
                                                }
                                                let cc = 'downcourse' + localStorage.userId
                                                that.$db_sdk.update('pcDB', cc, obj, {
                                                    index_name: 'bookid',
                                                    index_unique: false
                                                });
                                            }
                                        })
                                    });
                                    let newobj = dbObj;
                                    if (cloud_resource_list) {
                                        newobj.yunziyuan = cloud_resource_list;
                                    }
                                    let newff = 'coursecontent' + localStorage.userId;
                                    that.$db_sdk.update('pcDB', newff, newobj);

                                    if(that.total >0){
                                        that.total = that.down_list.length-that.now_index-1
                                    }


                                    that.now_index = that.now_index + 1;
                                    if(that.now_index < that.down_list.length){
                                        that.init_lesson_res_list(function (setDownloadParam, dbObj, cloud_resource_list) {
                                            that.execute_download(setDownloadParam, dbObj, cloud_resource_list);
                                        })
                                    }else {
                                        that.$message.success('更新完成')
                                        that.$emit('on-close',true)
                                    }
                                }).catch((err) => {
                                console.log(err)
                                //失败的话，继续进行下一课更新
                                that.now_index = that.now_index + 1;
                                if(that.now_index < that.down_list.length){
                                    that.init_lesson_res_list(function (setDownloadParam, dbObj, cloud_resource_list) {
                                        that.execute_download(setDownloadParam, dbObj, cloud_resource_list);
                                    })
                                }else {
                                    that.$message.success('更新完成')
                                    that.$emit('on-close',true)
                                }
                            })
                        }
                    }
                }, function (json) {
                    console.log("fail::" + json);
                    let result = JSON.parse(json);
                    if(result.ReturnValue != that.down_list[that.now_index].id){
                        return;
                    }
                    let now_down_obj = that.down_list[that.now_index];
                    now_down_obj.down_state = 4;
                    that.down_list.splice(that.now_index, 1, now_down_obj);
                    //失败的话，继续进行下一课下载
                    that.now_index = that.now_index + 1;
                    if(that.now_index < that.down_list.length){
                        that.init_lesson_res_list(function (setDownloadParam, dbObj, cloud_resource_list) {
                            that.execute_download(setDownloadParam, dbObj, cloud_resource_list);
                        })
                    }else {
                        that.$message.error('资源更新失败')
                        that.$emit('on-close',true)
                    }
                }, function (json) {
                    if (json) {
                        console.log("progress::" + json);
                        //改变当前下载的状态
                        let result = JSON.parse(json);
                        let now_down_obj = that.down_list[that.now_index];
                        now_down_obj.down_state = 2;
                        now_down_obj.down_progress = result.ReturnValue.Progress;
                        now_down_obj.speed = result.ReturnValue.DownloadSpeed;
                        that.down_list.splice(that.now_index, 1, now_down_obj);
                    }
                });
            },
            init_lesson_res_list(callback) {
                let that = this;
                //如果下载列表长度为0，且下载列表长度 小于等于 当前索引，直接退出
                if(that.down_list.length === 0 || that.now_index >= that.down_list.length){
                    return;
                }
                let nowIndex = that.now_index
                let nowLesson = that.down_list[nowIndex]
                that.down_list[that.now_index].down_state = 5;
                that.$http.post('/resource/getResAndCouesewareByLessonId', {
                    lessonId: nowLesson.id
                }).then((res) => {
                    if (res.data.code == 0) {
                        if (Object.keys(res.data.returnValue).length > 0) {  //returnValue是否为空
                            if(res.data.returnValue.resourceVOList){
                                res.data.returnValue.resourceVOList.forEach((item) => {
                                    item.resMetaInfoVO.meta_type = that.change_type(item.resMetaInfoVO.res_type)
                                });
                            }
                        }
                        let ccf = ''
                        let ccn = ''
                        if (res.data.returnValue.resCoursewaresVOList) {
                            ccf = that.$clientSDK.getCoursewarePath(res.data.returnValue.resCoursewaresVOList[0].id)
                            ccn = res.data.returnValue.resCoursewaresVOList[0].title

                            res.data.returnValue.resCoursewaresVOList.forEach((itemppt) => {
                                itemppt.local_url = that.$clientSDK.getCoursewarePath(itemppt.id)
                            })
                        }
                        let callbackObj = {
                            id: nowLesson.id,
                            data: res.data.returnValue,
                            defaultppt_path: ccf,
                            defaultppt_name: ccn
                        }

                        let down_course_list = []
                        if (res.data.returnValue.resCoursewaresVOList) {
                            down_course_list = res.data.returnValue.resCoursewaresVOList
                        } else {
                            down_course_list = [{
                                gmtModify: '',
                                thumb: '',
                                id: '',
                                gmtCreate: '',
                                title: '',
                                url: '',
                            }]
                        }
                        let down_ziyuan_list = res.data.returnValue.resourceVOList;
                        that.$http.post('/usermeta/getUserLessonMeta', {
                            lessonId: nowLesson.id,
                            isDetail: '1',
                        }).then(response => {
                            if (response.data.code == 0) {
                                let metaInfos = response.data.returnValue.lessonMetaVOS[0].resMetaInfoVOS;
                                that.create_down_gen(down_ziyuan_list, down_course_list, metaInfos, nowLesson.id, function (setDownloadParam) {
                                    if (callback) {
                                        callback(setDownloadParam, callbackObj, metaInfos);
                                    }
                                });
                            } else {
                                that.create_down_gen(down_ziyuan_list, down_course_list, null, nowLesson.id, function (setDownloadParam) {
                                    if (callback) {
                                        callback(setDownloadParam, callbackObj);
                                    }
                                });
                            }
                        }).catch(error => {
                            console.log(error);
                            callback(null, callbackObj);
                        })
                    }
                })
            },
            change_urltype(data) {
                switch (data) {
                    case 1:
                        return '/resource/getHeatMapsById'
                        break
                    case 2:
                        return '/resource/getTimeLapsesById'
                        break
                    case 3:
                        return '/resource/getPartialsById'
                        break
                    case 4:
                        return '/resource/getVirtualRealitysById'
                        break
                    case 5:
                        return '/resource/getRotation360sById'
                        break
                    case 6:
                        return '/resource/getInnerStructsById'
                        break
                    case 7:
                        return '/resource/getPolyvVideosById'
                        break
                    case 8:
                        return '/resource/getZoomInsById'
                        break
                    case 9:
                        return '/resource/getMultiAnglesById'
                        break
                    case 10:
                        return 'resource/getQuizsById'
                        break
                    case 13:
                        return 'resource/getCollectionById'
                        break
                }
            },
            create_down_gen(ziyuan_list, course_list, cloud_resource_list, lessonId, callback) {
                let that = this;
                let setDownloadParam = {};
                let downloadInfo = [];
                setDownloadParam.SetDownloadId = lessonId;
                //0代表重新下载
                setDownloadParam.IsForceDownload = '0';
                if (course_list[0].id) {
                    course_list.forEach((course_ppt) => {
                        let downloadParam = {};
                        downloadParam.FileName = course_ppt.id + ".ppt";
                        downloadParam.FileType = "courseware";
                        downloadParam.TaskId = course_ppt.id;
                        downloadParam.Url = course_ppt.url;
                        downloadParam.Vid = '';
                        downloadInfo.push(downloadParam);
                    })
                }
                //promise数组
                let resPromiseArr = [];
                //1.原始资源
                if (ziyuan_list) {
                    ziyuan_list.forEach((item) => {
                        let itemPromise = function () {
                            return new Promise(function (resolve, reject) {
                                let downurl = that.change_urltype(item.resMetaInfoVO.res_type)
                                that.$http.post(downurl, {
                                    id: item.resMetaInfoVO.meta_id
                                }).then((res) => {
                                    if (res.data.code == 0) {
                                        res.data.returnValue.intro = item.intro;
                                        res.data.returnValue.show_name = item.name;
                                        that.$clientSDK.saveResourceDetail(res.data.returnValue.meta_info.meta_id, res.data.returnValue.meta_info.meta_type, res.data.returnValue);
                                        let metaInfo = res.data.returnValue.meta_info;
                                        let downloadParam = {};
                                        downloadParam.TaskId = metaInfo.meta_id;
                                        downloadParam.FileType = metaInfo.meta_type;
                                        if (metaInfo.meta_type === 'PolyvVideo') {
                                            downloadParam.FileName = metaInfo.meta_id;
                                        } else {
                                            downloadParam.FileName = metaInfo.meta_id + '.zip';
                                            downloadParam.Url = that.$clientSDK.rescContextUrl() + metaInfo.zip;
                                        }
                                        downloadInfo.push(downloadParam);
                                    }
                                    resolve("success");
                                }).catch(error => {
                                    reject(error);
                                })
                            });
                        }
                        resPromiseArr.push(itemPromise);
                    })
                }
                //2.用户上传ppt资源
                let userFilePromise = function () {
                    return new Promise(function (resolve, reject) {
                        that.$http.post('/usermeta/getAllUserLessonFile', {
                            lessonId: lessonId,
                            withFileUrl: 1,
                        }).then(response => {
                            let returnValue = response.data.returnValue;
                            if (returnValue.length !== 0) {
                                returnValue.forEach(item => {
                                    let downloadParam = {};
                                    downloadParam.TaskId = lessonId + "-" + item.fileId;
                                    downloadParam.FileType = "ppt";
                                    downloadParam.FileName = item.displayName;
                                    downloadParam.Url = item.downloadUrl;
                                    downloadInfo.push(downloadParam);
                                });
                            }
                            resolve("success");
                        }).catch(error => {
                            reject(error);
                        })
                    });
                }
                resPromiseArr.push(userFilePromise);
                //3.用户下载的云端资源
                if (cloud_resource_list) {
                    cloud_resource_list.forEach(item => {
                        let itemPromise = function () {
                            return new Promise(function (resolve, reject) {
                                let downurl = that.change_urltype(item.res_type)
                                that.$http.post(downurl, {
                                    id: item.meta_id
                                }).then((res) => {
                                    if (res.data.code == 0) {
                                        res.data.returnValue.intro = item.intro;
                                        res.data.returnValue.show_name = item.name;
                                        that.$clientSDK.saveResourceDetail(res.data.returnValue.meta_info.meta_id, res.data.returnValue.meta_info.meta_type, res.data.returnValue);
                                        let metaInfo = res.data.returnValue.meta_info;
                                        let downloadParam = {};
                                        downloadParam.TaskId = metaInfo.meta_id;
                                        downloadParam.FileType = metaInfo.meta_type;
                                        if (metaInfo.meta_type === 'PolyvVideo') {
                                            downloadParam.FileName = metaInfo.meta_id;
                                        } else {
                                            downloadParam.FileName = metaInfo.meta_id + '.zip';
                                            downloadParam.Url = that.$clientSDK.rescContextUrl() + metaInfo.zip;
                                        }
                                        downloadInfo.push(downloadParam);
                                    }
                                    resolve("success");
                                }).catch(error => {
                                    reject(error);
                                })
                            });
                        }
                        resPromiseArr.push(itemPromise);
                    })
                }
                //构造一组异步事件状态机
                let resGenerator = GeneratorFactory.createGenerator(resPromiseArr);
                GeneratorExecutor.run(resGenerator, function () {
                    setDownloadParam.DownloadParams = downloadInfo;
                    callback(setDownloadParam)
                })
            }
        },
    }
</script>

<style lang="scss" scoped>

    .download_bookwrap {
        .download_dialog_cover {
            background: #000;
            opacity: 0.3;
            position: fixed;
            //z-index: 35;
            top: 32px;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .download_dialog_content {
            width: 680px;
            min-height: 536px;
            position: fixed;
            background: #fff;
            top: 15%;
            left: 50%;
            margin-left: -340px;
            //z-index: 40;
            line-height: 1.6;
            border-radius: 8px;
            padding-bottom: 6px;
            .down_top {
                width: 100%;
                height: 72px;
                background-image: url('../assets/img/download_popuphead.png');
                background-repeat: no-repeat;
                background-size: 100% 72px;
                background-position: 0px 0px;
                overflow: hidden;
                .d_t_close{
                    width: 20px;
                    height: 20px;
                    margin-left: 640px;
                    margin-top: 20px;
                    cursor: pointer;
                    background-image: url('../assets/img/close_icon_white.png');
                    background-repeat: no-repeat;
                    background-size: 16px 16px;
                    background-position: 0px 0px;
                }
            }
            .down_title{
                display: flex;
                height: 48px;
                justify-content: space-between;
                .d_t_left{
                   width:100px;
                   height:48px;
                   font-size:13px;
                   color:rgba(121,128,138,1);
                   line-height:48px;
                   margin-left: 32px;
                   margin-top: 10px;
                }
                .d_t_right{
                    display: flex;
                    justify-content: center;
                    align-items:center;
                    margin-right: 20px;
                    .top_update_button{
                        color: white;
                        font-size:13px;
                        line-height: 24px;
                        text-align: center;
                        width:80px;
                        height:24px;
                        background:#408FFF;
                        border-radius:28px;
                        cursor: pointer;
                        margin-right:8px;
                    }
                    .top_stop_button{
                        color: white;
                        font-size:13px;
                        line-height: 24px;
                        text-align: center;
                        width:80px;
                        height:24px;
                        background:rgba(255,192,20,1);
                        border-radius:28px;
                        cursor: pointer;
                    }
                }
            }
            .down_con_wrap {
                overflow-y: auto;
                height: 415px;
                //border-bottom: 1px solid #e5e5e5;
               // margin-bottom: 10px;
                padding-top: 10px;
                .downalert_content {
                    display: flex;
                    height: 33px;
                    line-height: 33px;
                    .down_book_left_1 {
                        width: 369px;
                        padding-left: 31px;
                    }
                    .down_book_middle_1 {
                        width: 160px;
                        color: #999;
                        text-align: left;
                    }
                    .down_book_middle_2 {
                        width: 160px;
                        text-align: left;
                    }
                    .middle_progress{
                      width:80px;
                      height:4px;
                      border-radius:2px;
                      margin-top: 16px;
                      background-color:#DCE0E6;
                      position: relative;
                      .progress_span{
                          display:block;
                          width:0px;
                          height:100%;
                          color:#408FFF;
                          font-size:10px;
                          line-height:10px;
                          text-align:right;
                          background:linear-gradient(90deg,rgba(129,182,255,1) 0%,rgba(102,150,255,1) 100%);
                          border-radius:24px;
                      }
                    }
                    .down_book_right_1 {
                        width: 80px;
                        color: #999;
                        //font-size: 11px;
                        padding-left:5px;
                    }
                    .down_speed{
                        width: 241px;
                        color: #408FFF;
                        padding-right:25px;
                        text-align: right;
                    }
                }
            }
            .down_con_wrap::-webkit-scrollbar {
                width: 6px;
                background-color: #f5f5f5;
            }
            .down_con_wrap::-webkit-scrollbar-track {
                border-radius: 6px;
                background-color: white;
            }
            .down_con_wrap::-webkit-scrollbar-thumb {
                border-radius: 6px;
                background-color: #A8B3C2;
            }

            .down_alert_stop {
                width: 85px;
                height: 28px;
                line-height: 25px;
                text-align: center;
                cursor: pointer;
                background-color: #408fff;
                margin: 0 auto;
                border-radius: 24px;
                color: white;
            }
            .downbook_no {
                width: 278px;
                height: 280px;
                margin-top: 64px;
                margin-left: 213px;
                color: #A8B3C2;
                font-size: 16px;
                padding-top: 267px;
                text-align: center;
                background-image: url('../assets/img/no_contend_img.png');
                background-repeat: no-repeat;
                background-size: 276px 263px;
                background-position: 0px 0px;
                .downbook_n_down {
                    margin-top: 60px;
                    cursor: pointer;
                }
            }
        }

          .homealert_exit{
              position:fixed;
             .homealert_cover{
                background: #000;
                opacity: 0.3 ;
                position: fixed;
                z-index: 35;
                top: 32px;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 80;
             }
             .homealert_content{
                    position: fixed;
                    width: 320px;
                    height: 105px;
                    top: 30%;
                    left: 50%;
                    margin-left: -160px;
                    background: white;
                    border-radius: 10px;
                    border: 1px solid #dce0e6;
                    z-index: 90;
                    .homealert_content_top{
                        text-align: center;
                        line-height: 20px;
                        font-size: 15px;
                        padding-top:15px;
                    }
                    .homealert_content_down{
                        display: flex;
                        justify-content: center;
                        .ha_c_d_left{
                            border-radius: 24px;
                            width: 96px;
                            height: 32px;
                            display: block;
                            text-align: center;
                            padding-top: 7px;
                            font-size: 13px;
                            color: #ffffff;
                            background: #e07038;
                            margin-top: 25px;
                            cursor: pointer;
                        }
                        .ha_c_d_right{
                            border-radius: 24px;
                            width: 96px;
                            height: 32px;
                            display: block;
                            text-align: center;
                            padding-top: 7px;
                            font-size: 13px;
                            color: #ffffff;
                            background: #408fff;
                            margin-top: 25px;
                            margin-left: 16px;
                            cursor: pointer;
                        }
                    }
             }
          }
    }
</style>











